<template>
  <div class="img-item">
    <img :src="item.picUrl || item.cover" />
    <span v-show="playnum">{{ item.playCount | formatmun }}</span>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      defind: () => {
        return null;
      },
    },
    playnum: {
      type: Boolean,
      defind: true,
    },
  },
  filters: {
    formatmun(value) {
      let val = Math.ceil(value / 1000);
      return val / 10 + "万";
    },
  },
};
</script>

<style lang="scss" scoped>
.img-item {
  position: relative;
  img {
    display: block;
    width: 100%;
  }
  span {
    position: absolute;
    right: 5px;
    top: 2px;
    z-index: 3;
    padding-left: 13px;
    color: #fff;
    font-size: 12px;
    background: url();
    background-position: 0;
    background-repeat: no-repeat;
    background-size: 11px 10px;
    z-index: 2;
  }
  &::after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 20px;
    z-index: 1;
    background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    );
  }
}
</style>
